<template>
  <div class="page-down">
      <div class="down-chars">
        <dv-charts :option="option1" id="mychartd1"  style="width: 30rem;height: 16rem;"  class="down-mychars"/>

      </div>
      <div class="down-chars">
        <dv-charts :option="option2" id="mychartd2" style="width: 30rem;height: 16rem;"  class="down-mychars"/>

      </div>
      <div class="down-chars">
        <dv-charts :option="option3" id="mychartd3" style="width: 30rem;height: 16rem;"  class="down-mychars"/>
      </div>
  </div>
 
</template>
   
 <script>
    
    import { ref, onMounted } from 'vue'
    import Charts from '@jiaminghi/charts'
    export default {
      data () {
        return {
          option1:{},
          option2:{},
          option3:{}
        }
      },
      setup() {
        const root = ref(null)  

        function initChart1() {
          let  valuesInit = randomData(400);
          
          const option1 = 
          {
          title: {
            text: '流速趋势图',
            offset:[-120, -10],
            color:'#fff',
            style: 
            {
            fill: '#ffffff',
            fontSize: 16,
            fontWeight: '400',
            textAlign: 'right'
            },
          },

          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          legend: {
            data: [
              {
                name:'流速（km/h）',
                color:'#11E48A',
                icon : 'rect'
              }
            ],
            top: 50,
            right:50,
            textStyle: {
                fill: '#11E48A'
            }
          },
          xAxis: {
            data: [
            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
            '18:00', '19:00'
            ],
            nameTextStyle:{
              fill: '#fff',
              fontSize: 10
            },
            axisLabel: {
              style: {
                rotate: 20,
                textAlign: 'left',
                textBaseline: 'top',
                fill: '#fff',
              }
            },
            axisTick: {
              show: false
            },
            style: {
              stroke: '#333',
              lineWidth: 1
            }
          },
          yAxis: [
            {
              data: 'value',
              min: 0,
              max: 400,
              interval: 100,
              axisLabel: {
                formatter: '{value}',
                style: {
                  fill: '#fff',
                  fontSize: 10,
                  rotate: 0
                }
              },
              axisTick: {
                show: false
              },
              textStyle: {
                fill: '#ffffff'
              },
            }
          ],
          series: [
            {
              name: '流速（km/h）',
              data:  valuesInit,
              smooth: true,
              type: 'line',
              textStyle: {
                fill: '#ffffff'
              },
              lineArea: {
                show :true,
                style:{
                  fill: '#11E48A'
                }
              },
              linePoint:{
                show:false
              },
              rLevel  :1,
              animationCurve :'easeOutCubic',
              animationFrame : 10
            }
          ]
        }
          return option1
        }
        function initChart2() {
          let  valuesInit = randomData(40);
          
          const option2 = 
          {
          title: {
            text: '流域内阻碍物数量',
            offset:[-100, -10],
            color:'#fff',
            style: 
            {
            fill: '#ffffff',
            fontSize: 16,
            fontWeight: '400',
            textAlign: 'right'
            },
          },

          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          legend: {
            data: [
              {
                name:'目标数量（个）',
                color:'#ffbf2f',
                icon : 'rect'
              }
            ],
            top: 50,
            right:50,
            textStyle: {
                fill: '#ffbf2f'
            }
          },
          xAxis: {
            data: [
            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
            '18:00', '19:00'
            ],
            nameTextStyle:{
              fill: '#fff',
              fontSize: 10
            },
            axisLabel: {
              style: {
                rotate: 20,
                textAlign: 'left',
                textBaseline: 'top',
                fill: '#fff',
              }
            },
            axisTick: {
              show: false
            },
            style: {
              stroke: '#333',
              lineWidth: 1
            }
          },
          yAxis: [
            {
              data: 'value',
              min: 0,
              max: 40,
              interval: 10,
              axisLabel: {
                formatter: '{value}',
                style: {
                  fill: '#fff',
                  fontSize: 10,
                  rotate: 0
                }
              },
              axisTick: {
                show: false
              },
              textStyle: {
                fill: '#ffffff'
              },
            }
          ],
          series: [
            {
              name: '目标数量（个）',
              data:  valuesInit,
              smooth: true,
              type: 'line',
              textStyle: {
                fill: '#ffffff'
              },
              lineArea: {
                show :true,
                style:{
                  fill: '#ffbf2f'
                }
              },
              linePoint:{
                show:false
              },
              rLevel  :1,
              animationCurve :'easeOutCubic',
              animationFrame : 10
            }
          ]
        }
          return option2
        }
        function initChart3() {
          let  valuesInit = randomData(400);
          
          const option3 = 
          {
          title: {
            text: '流域内阻碍物信号强度',
            offset:[-70, -10],
            color:'#fff',
            style: 
            {
            fill: '#ffffff',
            fontSize: 16,
            fontWeight: '400',
            textAlign: 'right'
            },
          },

          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          legend: {
            data: [
              {
                name:'信号强度（强度越大，阻碍物尺寸越大）',
                color:'#1AC9FF',
                icon : 'rect'
              }
            ],
            top: 50,
            right:40,
            textStyle: {
                fill: '#1AC9FF'
            }
          },
          xAxis: {
            data: [
            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
            '18:00', '19:00'
            ],
            nameTextStyle:{
              fill: '#fff',
              fontSize: 10
            },
            axisLabel: {
              style: {
                rotate: 20,
                textAlign: 'left',
                textBaseline: 'top',
                fill: '#fff',
              }
            },
            axisTick: {
              show: false
            },
            style: {
              stroke: '#333',
              lineWidth: 1
            }
          },
          yAxis: [
            {
              data: 'value',
              min: 0,
              max: 400,
              interval: 100,
              axisLabel: {
                formatter: '{value}',
                style: {
                  fill: '#fff',
                  fontSize: 10,
                  rotate: 0
                }
              },
              axisTick: {
                show: false
              },
              textStyle: {
                fill: '#ffffff'
              },
            }
          ],
          series: [
            {
              name: '信号强度（强度越大，阻碍物尺寸越大）',
              data:  valuesInit,
              smooth: true,
              type: 'line',
              textStyle: {
                fill: '#ffffff'
              },
              lineArea: {
                show :true,
                style:{
                  fill: '#1AC9FF'
                }
              },
              linePoint:{
                show:false
              },
              rLevel  :1,
              animationCurve :'easeOutCubic',
              animationFrame : 10
            }
          ]
        }
          return option3
        }

        function changeMyChart(myChart,num){
          setInterval(function () {
            let  values = changeData(myChart.option.series[0].data,num);
            let option = myChart.option;
            option.series[0].data= values;
            myChart.setOption(
              option
              ,true);
          },5000)
        }
        
        function randomData(num) {
          let addNUm = num/2
          let data = [];
          for(let i=0;i<=7;i++){
            let value = Math.random() * addNUm;
            value = value  + addNUm;
            let dataObject =   Math.round(value);
            data.push(dataObject);
          }
          return data
        }
        function changeData(data,num) {
          
          let dataNew = [];
          let addNUm = num/2
          let value = Math.random() * addNUm+addNUm;
          for(let i=0;i<=6;i++){
            dataNew.push(data[i+1]);
          }
          dataNew.push(value)
          return dataNew
        }
        // mounted
        onMounted(() => {
          
          const container = document.getElementById('mychartd1')
          const myChart = new Charts(container)
          myChart.setOption(initChart1())

          const container2 = document.getElementById('mychartd2')
          const myChart2 = new Charts(container2)
          myChart2.setOption(initChart2())

          const container3 = document.getElementById('mychartd3')
          const myChart3 = new Charts(container3)
          myChart3.setOption(initChart3())
          
           
          changeMyChart(myChart,400)
          changeMyChart(myChart2,40)
          changeMyChart(myChart3,400)
        }
      )
        return {
            root
          }
      }
     }
    </script>

  <style>

  .page-down{
    margin-top: 5%;
    height: 40%;
    display: flex;
  }
  .down-chars{
    flex: 3;
    position: relative;
  }
  .down-mychars{
    top: -18rem;
  }
</style>